<template>
  <div class="record-details">
    <p class="car-number">{{ detailsData.carNumber }}</p>
    <p class="park-name">{{ detailsData.parkName }}</p>
    <div class="content">
      <p>提交时间：<span>{{detailsData.submitTime}}</span></p>
      <p>预约时间：<span>{{detailsData.reserveBeginTime}}</span></p>
      <p>入场时间：<span>{{detailsData.inTime}}</span></p>
      <p>离场时间：<span>{{detailsData.outTime}}</span></p>
      <p>预约收费：<span>{{detailsData.reserveAmount}}元</span></p>
    </div>
    <p style="text-align: center;">
      <el-button type="primary" @click="cancle">关闭</el-button>
    </p>
  </div>
</template>

<script>
  export default {
    name: 'record-details',
    props: ['id'],
    data() {
      return {
        detailsData: {}
      }
    },
    mounted() {
      this.getRecordDetails();
    },
    methods: {
      getRecordDetails() {
        this.$axios({
          method: 'post',
          url: '/park/reserve-record/getReserveRecordById',
          data: this.$qs.stringify({ id : this.id })
        }).then(res => {
          this.detailsData = res.data;
        })
      },
      cancle() {
        this.$emit('closeDialog',false);
      }
    }
  }
</script>

<style>
  .car-number {
    text-align: center;
    font-size: 20px;
    margin: 0;
  }
  .park-name {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin: 10px;
  }
  .content {
    display: inline-block;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
  }
  .content p span {
    font-weight: bold;
  }


</style>
